<template>
	<view class="content">
		<view class='topblock'>
			<view class='header'>
				<pagehead :title="title" :titlecolor='titlecolor' :isback='isback'></pagehead>
			</view>
			<view class='typelist'>
				<view class='type' v-for='(item,index) in typelist' :key="'typelist'+index"
					:class="{'active':active==index}" @click="select(index)">设备概览</view>
			</view>
		</view>
		<view class='blocks'>
			<swiper class="swiper" :current='active' :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration" :disable-touch='disable'>
				<swiper-item>
					<devicemanagement1></devicemanagement1>
				</swiper-item>
				<swiper-item>
					<devicemanagement2></devicemanagement2>
				</swiper-item>
				<swiper-item>
					<devicemanagement3></devicemanagement3>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 页面标题
				title: '设备中心',
				titlecolor: 'black',
				isback: true,
				// 分类列表
				typelist: [
					'设备概览', '设备详情', '设备管理'
				],
				active: 0,
				// swiper配置
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				disable:true


			}
		},
		onReady() {

		},
		methods: {
			select: function(value) {
				this.active = value
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			}

		}
	}
</script>

<style lang='less' scoped>
	.content {
		background-color: #F2F2F2;
		min-height: 100vh;
		box-sizing: border-box;
		padding-top: 1rpx;

		.topblock {
			background-color: #fff;
			position: fixed;
			top: 0rpx;

			.header {
				background-size: 100% 100%;
			}

			.typelist {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0rpx 32rpx;

				.type {
					color: #999999;
					font-size: 30rpx;
					margin-top: 40rpx;
					line-height: 100rpx;
				}

				.active {
					color: #2F70F1;
					border-bottom: 4rpx solid #2F70F1;
					font-size: 36rpx;
				}
			}
		}

		.blocks {
			margin-top: 300rpx;
		}

	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 80vh;
		margin-top: 30rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
</style>
